<template>
	<div class="app-textarea">
		
		<textarea 
		  ref="textarea"
			v-model="value" 
			:row="row" 
			:style="'width:'+ width + ';'"
			:placeholder="placeholder"></textarea>
		
	</div>
</template>

<script>
	
	export default {
		name: "appTextarea",
		props : [
			"width"
		],
		components : {
			
		},
		data(){
			return {
				value : "",
				placeholder : "",
				row : 3 ,
			}
		},
		mounted(){
			
		},
		watch:{
			value(newValue,oldValue){
				this.$emit("change","appTextarea",newValue)
			}
		},
		methods:{
			reset(){
				this.value = "";
			},
		},
	}
</script>

<style scoped lang="scss">
	@import "../../../styles/variables.scss";
	
	.app-textarea {
		
		textarea {
			border-color:$borderGrey;
			min-height:50px;
			padding:5px 10px;
			font-size: $fontSmall;
			line-height:1.5;
			
			&:focus {
				outline: 0;
				box-shadow: none;
				border-color: $mainBlue;
				border-radius: $borderSmallRadius;
			}
		}
		
	}
	
</style>